<template>
  <div :style="{ left: x + 'px', top: y + 'px' }" @mouseover="stop" @mouseleave="resume" class="card">
    <slot></slot>
    <img v-if="item.classify===110" :src="image">
    <video v-if="item.classify===111" :src="image"/>
    <NoteCard v-else :item="item"/>
  </div>
</template>

<script>
import NoteCard from './NoteCard.vue'

export default {
  props: ['item', "removeItem"],
  components: {
    NoteCard
  },
  data() {
    return {
      x: 0,
      y: 0,
      dx: 0,
      dy: 0,
      stopped: false,
      image: false,
    };
  },
  created() {
    this.x = Math.random() * (window.innerWidth - 100);
    this.y = Math.random() * (window.innerHeight - 100);
    this.dx = Math.random() * 2 - 1;
    this.dy = Math.random() * 2 - 1;
    console.log(" this.item", this.item)
  },
  mounted() {
    this.image = "http://" + new URL(window.location.href).hostname + ':' + new URL(window.location.href).port + this.item.content
    setInterval(() => {
      if (!this.stopped) {
        this.x += this.dx;
        this.y += this.dy;
        this.checkCollisions();
      }
    }, 10);
    setInterval(() => {
      this.removeItem(this.item)
    }, 180000)
  },
  methods: {
    checkCollisions() {
      const cards = document.querySelectorAll('.card');
      cards.forEach((card) => {
        if (card !== this.$el) {
          const rect1 = this.$el.getBoundingClientRect();
          const rect2 = card.getBoundingClientRect();
          if (
            rect1.left < rect2.right &&
            rect1.right > rect2.left &&
            rect1.top < rect2.bottom &&
            rect1.bottom > rect2.top
          ) {
            // this.dx = Math.random() * 2 - 1;
            // this.dy = Math.random() * 2 - 1;
          }
        }
      });
      if (this.x < 0 || this.x > window.innerWidth - 500) {
        this.dx = -this.dx;
      }
      if (this.y < 0 || this.y > window.innerHeight - 100) {
        this.dy = -this.dy;
      }
    },
    stop() {
      this.stopped = true;
    },
    resume() {
      this.stopped = false;
    },
  },
};
</script>

<style>
.card {
  position: absolute;
  width: 500px;
  height: 100px;
  background-color: #ccc;
}
</style>
